<template>
	<view>
		<view class="muu-audio">
			
			<view class="audio-wrapper" >
				<view class="audio-info">
					<view class="title text-ellipsis">{{chapterTitle}}</view>
					<view class="lesson">
						<view class="audio-number">{{format(duration)}}</view>
						<view class="lesson-title text-ellipsis">{{lessonTitle}}</view>
					</view>
				</view>
				<view class="audio-control audio-control-switch" :class="{audioLoading:''}" :style="{color}" @click="audio.paused?play():pause()">
					<text v-if="playing" class="iconfont">&#xe6a5;</text>
					<text v-else class="iconfont">&#xe6a4;</text>
				</view>
			</view>
			<view class="audio-slider-wrapper">
				<slider class="audio-slider" :activeColor="color" backgroundColor="#f2f2f2" block-size="12" :value="current" :max="duration" @changing="seek=true,current=$event.detail.value" @change="audio.seek($event.detail.value)"></slider>
			</view>
		</view>
	</view>
</template>

<script>
	import muu from '../../static/js/time.js'
	
	export default {
		name: 'AudioPlayer',
		props: {
			continue: { //播放完成后是否继续播放下一首，需定义@next事件
				type: Boolean,
				default: false
			},
			control: { //是否需要上一曲/下一曲按钮
				type: Boolean,
				default: false
			}, 
			color: { //主色调
				type: String,
				default: '#03b8cf'
			},
			data: {
				type: Object,
				default: {}
			}
		},
		created() {
			this.audio = uni.createInnerAudioContext(),
			console.log(this.current,'当前进度')
			this.setDefaultSrc()
			this.canUserMemberCardFn()
			this.audio.obeyMuteSwitch = false
			//音频进度更新事件
			this.audio.onTimeUpdate(() => {
				this.current = this.audio.currentTime
				this.duration = this.audio.duration
				//console.log(this.current)
				// 单课类型判断试听时间是否结束
				if(this.data.play_type == 0){
					if(this.data.purchase == 0 && this.canUserMemberCard == false){
						if(this.current > this.data.try_time && this.tryTimeEnd == false){
							//暂停视频
							this.audio.pause()
							this.playing = false
							this.showTryPlayModal()
							return false
						}else{
							this.tryTimeEnd = false
						}
					}
				}
				
				// 系列课判断
				if(this.data.play_type == 1){
					let chapter = this.data.audio_chapter[this.chapterIndex]
					if(this.data.purchase == 0 && chapter.list[this.lessonIndex].try_play == 0 && this.canUserMemberCard == false){
						//console.log('禁止试看')
						this.audio.pause()
						this.playing = false
						this.showTryPlayModal()
						return false
					}
				}
			})
			//音频播放事件
			this.audio.onPlay(() => {
				console.log('播放事件')
				this.playing = true
				//仅购买后或会员统计
				if(this.data.purchase == 1 || this.data.can_be_used_card!=undefined && this.data.can_be_used_card.member_card_info.discount == 0){
					muu.startTimeSend('Knowledge',this.data.id)
				}
			})
			//音频暂停事件
			this.audio.onPause(() => {
				this.playing = false
				muu.stopTimeSend()
			})
			//音频停止事件
			this.audio.onStop(() => {
				this.playing = false
				muu.stopTimeSend()
			})
			//音频结束事件
			this.audio.onEnded(() => {
				if (this.continue) {
					this.next()
				} else {
					this.playing = false
					this.current = 0
					muu.stopTimeSend()
				}
			})
			//音频完成更改进度事件
			this.audio.onSeeked(() => {
				this.seek = false
			})
		},
		data() {
			return {
				audio: {},
				current: 0, //当前进度(s)
				duration: 0, //总时长(s)
				playing: false, //是否处于播放状态
				seek: false, //是否处于拖动状态
				tryPlay: false, // 是否试听课程，系列课有效
				chapterIndex: 0,
				chapterTitle: '', //章节标题 单课显示课程标题
				lessonIndex: 0,
				lessonTitle: '', //课程标题 单课显示课程简短描述
				canUserMemberCard: false, //是否会员免费专享
				tryTimeEnd: false, //试看时间是否结束，仅单课有效
				fixedPlay: false   // 是否浮动播放
			}
		},
		destroyed() {
			muu.stopTimeSend()
		},
		methods: {
			/**
			 * 设置默认路径
			 */
			setDefaultSrc: function(){
				if(this.data.play_type == 1){ //系列课
					let chapter = this.data.audio_chapter[0]
					this.audio.src = chapter.list[0].all_url
					
					this.chapterTitle = chapter.title
					this.chapterIndex = 0
					this.lessonTitle = chapter.list[0].title
					this.lessonIndex = 0
					if(chapter.list[0].try_play == 1){
						this.tryPlay = true
					}
				}else{ //单课
					this.audio.src = this.data.audio_all_url
					this.chapterTitle = this.data.title
					this.lessonTitle = this.data.description
				}
			},
			//返回next事件
			next: function() {
				this.$emit('next')
			},
			//格式化时长
			format: function(num) {
				return '0'.repeat(2 - String(Math.floor(num / 60)).length) + Math.floor(num / 60) + ':' + '0'.repeat(2 - String(Math.floor(num % 60)).length) + Math.floor(num % 60)
			},
			//点击播放按钮
			play: function() {
				this.audio.play()
				this.playing = true
			},
			//暂停视频
			pause: function(){
				this.audio.pause()
				this.playing = false
			},
			/**
			 * 播放系列课列表内容
			 * @param {Number} chapter_index 章节索引
			 * @param {Number} lesson_index 课程索引
			 */
			playChapterIndex(chapter_index,lessons_index) {
				console.log(chapter_index + '|' + lessons_index)
				let _this = this
				this.chapterIndex = chapter_index
				this.lessonsIndex = lessons_index
				// 根据索引获取音频数据
				let chapter = this.data.audio_chapter[chapter_index]
				// 系列课判断
				if(this.data.purchase == 0 && this.data.play_type == 1 && chapter.list[lessons_index].try_play == 0 && this.canUserMemberCard == false){
					this.showTryPlayModal()
					return false
				}
				// 播放器停止
				console.log('停止播放')
				this.audio.stop()
				
				// 更换音频地址
				this.audio.src = chapter.list[lessons_index].all_url
				this.chapterTitle = chapter.title
				this.lessonTitle = chapter.list[lessons_index].title
				
				console.log('开始播放')
				//#ifdef H5
				// 设置总时长
				_this.current = 0 // 当前进度设为0
				_this.duration = this.audio.duration
				_this.play()
				//#endif
				
				//#ifdef MP-WEIXIN
				// 音频加载完能播放时
				this.audio.onCanplay(() => {
					 console.log('加载完成')
					// 设置总时长
					this.current = 0 // 当前进度设为0
					this.duration = this.audio.duration
					console.log('开始播放')
					this.play()
				})
				//#endif
				
				// 索引传给父组件
				this.$emit('returnChildData',{
					chapter_index:chapter_index,
					lessons_index:lessons_index
				})
			},
			/**
			 * 设置会员免费尊享
			 */
			canUserMemberCardFn() {
				if(this.data.can_be_used_card && this.data.can_be_used_card['member_card_info']['discount'] == 0){
					//会员专享
					this.canUserMemberCard = true
				}
			},
			/**
			 * 显示试听弹出框
			 */
			showTryPlayModal() {
				let that = this
				uni.showModal({
					title: '温馨提示',
					content: '订阅后收听完整音频',
					success: function(res){
						if(res.confirm){
							console.log('确认')
							//执行父组件下单购买
							// 执行父级方法
							that.$emit('sale')
						}else{
							console.log('取消')
						}
					}
				});
			},
			
			/**
			 * 设置为浮动播放器
			 */
			setFixed() {
				console.log('setFixed')
				this.fixedPlay = true
			}
		},
		
		beforeDestroy(){
			this.audio.destroy()
		}
	}
</script>

<style lang="scss">
	.muu-audio {
		position: absolute;
		bottom: 20rpx;
		left: 20rpx;
		right: 20rpx;
		padding: 0;
		background: #fff;
		border-radius: 6rpx;
		box-shadow: 0 14rpx 40rpx rgba(0,0,0,.5);
		z-index: 96;
		background: rgba(255,255,255,.98);
	}

	.audio-wrapper {
		margin-top: 16rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-family: "icon" !important;
		.audio-info {
			flex: 1;
			.title {
				font-size: 24rpx;
				color: #333;
				padding-left: 20rpx;
			}
			.lesson {
				display: flex;
				.audio-number {
					font-size: 24rpx;
					color: #999;
					padding-left: 20rpx;
				}
				.lesson-title {
					flex: 1;
					font-size: 24rpx;
					color: #999;
					padding-left: 20rpx;
				}
			}
		}
		
		.audio-control {
			font-size: 28rpx;
			line-height: 1;
			border: 4rpx solid #eee;
			border-radius: 50%;
			padding: 20rpx;
		}
		
		.audio-control-switch {
			font-size: 28rpx;
			margin: 0 20rpx;
		}
		
		.audioLoading {
			animation: loading 2s;
			animation-iteration-count: infinite;
			animation-timing-function: linear;
		}
		.audio-control-next {
			transform: rotate(180deg);
		}
	}
	
	.audio-slider-wrapper {
		display: block;
		padding: 0 20px;
		.audio-slider {
			margin: 0;
		}
	}

	@keyframes loading {
		to {
			transform: rotate(360deg);
		}
	}
</style>
